<template>
<div>
    <el-card class="box-card">
        <el-form :model="userInfo" :rules="userInfoRules" ref="userInfo" label-width="" class="demo-userInfo">
            <!--检测输入用户年龄-->
            <el-form-item style="width: 400px;margin-left: 30px" label="" prop="age">
                <el-input v-model="userInfo.age" placeholder="请输入年龄">
                    <template slot="prepend">
                        <i class="el-icon-user-solid"></i>
                    </template>
                </el-input>
            </el-form-item>

            <!--检测输入用户性别-->
            <el-form-item style="width: 400px;margin-left: 30px" label="" prop="gender">
                <el-input v-model="userInfo.gender" placeholder="请输入性别">
                    <template slot="prepend">
                        <i class="el-icon-user-solid"></i>
                    </template>
                </el-input>
            </el-form-item>

            <!--检测输入用户体重-->
            <el-form-item style="width: 400px;margin-left: 30px" label="" prop="weight">
                <el-input v-model="userInfo.weight" placeholder="请输入体重">
                    <template slot="prepend">
                        <i class="el-icon-user-solid"></i>
                    </template>
                </el-input>
            </el-form-item>

            <!--检测输入过敏史-->
            <el-form-item style="width: 400px; margin-left: 30px" label="" prop="allergy">
                <el-input
                        type="textarea" v-model="userInfo.allergy" placeholder="请输入过敏史">
                </el-input>
            </el-form-item>

            <!--检测输入过往病史-->
            <el-form-item style="width: 400px; margin-left: 30px" label="" prop="medicHistory">
                <el-input
                        type="textarea" v-model="userInfo.medicHistory" placeholder="请输入过往病史">
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="success" style="width: 330px;margin-left: 50px"
                           @click="submitInfoForm('userInfo')">保存信息</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</template>

<script>
import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";

export default {
    data(){
        return {
            loginInfo:[],
            imageUrl: '',
            dialogImageUrl: '',
            dialogVisible: false,
            userInfo:{
                age:'',gender:'',weight:'',allergy:'',medicHistory:''
            },
            userInfoRules:{
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                    // { min: 0, max: 120, message: '请输入合法年龄', trigger: 'blur' },
                    { validator: this.validateAge, trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请输入性别', trigger: 'blur' },
                    { min: 0, message: '请输入正确体重', trigger: 'blur' }
                ],
                weight: [
                    { required: true,message:'请输入体重',trigger:'blur'}
                ],
                allergy: [
                    { required: true,message:'请输入过敏史',trigger:'blur'}
                ],
                medicHistory: [
                    { required: true,message:'请输入过往病史',trigger:'blur'}
                ]
            }
        }
    },
    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //Custom validator function for age
        validateAge(rule, value, callback) {
            const ageRegex = /^\d+$/;
            if (!ageRegex.test(value)) {
                callback(new Error('年龄必须为整数'));
            } else {
                callback();
            }
        },
        submitInfoForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let url=BaseUrl.USER_ALL+'/user/info/add';
                    console.log(url);

                    TokenAxios.post(url,this.userInfo,{
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }).then((response)=>{
                        if(response.data.state===20000){
                            this.$message.success("修改成功");
                        }else{
                            this.$message.error(response.data.message);
                        }
                    })
                    this.loginInfo.role=2;
                    localStorage.setItem('loginInfo', JSON.stringify(this.loginInfo));
                    console.log(this.loginInfo)
                    location.reload();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        listUserInfo(){
            let url = BaseUrl.USER_ALL+'/user/info/list';
            console.log('url='+url)
                TokenAxios.get(url).then((response) => {
                    if(response.data.data){
                        this.userInfo = response.data.data;
                    }

                })
        },
        loadCurrentLoginInfo(){
            let loginInfoString=localStorage.getItem('loginInfo')

            this.loginInfo = JSON.parse(loginInfoString);
            if (!this.loginInfo) {
                this.$router.push('/login/user');
                return;
            }else if (this.loginInfo.role!==1&&this.loginInfo.role!==2){
                this.$message.error('无权访问');
                this.$router.push('/home');

                return;
            }
        },
    },
    created() {


    },
    mounted() {
        this.loadCurrentLoginInfo();
        // if (this.loginInfo.role==2){
            this.listUserInfo();
        // }
        console.log(this.loginInfo)

    }
}
</script>
<style>
body{
    background-color: rgb(241,242,243);
}
</style>
